{% extends "resource_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "备份操作 | 蓝鲸开发框架" %}</title>
    {{ block.super }}
{% endblock %}

{% block content %}
    <div>
        <!--
        如果没有引用以下文件，请去掉此注释
        <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
        <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
        -->
        <div style="width: 250px; float: left;margin: 0 10px; height: 500px">
            <div style=" margin-left: 20px">
                <span style="font-weight: bold;">选择业务</span>
                <div style="width: 200px">
                    <!--
                    option本身没有触发事件方法，也即在option中添加onclick点击事件 点击时是不会触发事件，只有在select里的onchange方法里触发。
                    如果在select中添加onclick方法，当还没选option就会被触发第一次当前的option值。
                    所以最理想做法是在select中onchange方法
                    -->
                    <select id="search_biz_infos" class="bk-form-select" onchange="search_biz_infos()">
                        {% for biz in bizs %}
                            <option value="{{ biz.bk_biz_id }}">[{{ biz.bk_biz_id }}] {{ biz.bk_biz_name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div style=" margin: 10px 0 10px 20px">
                <span style="font-weight: bold;">选择拓扑</span>
            </div>
            <div class="bk-tree" id="bk-tree">
                <ul class="tree-content" id="bk-ul-tops">
                    <!--
                    <li class="folder">
                        <a href="javascript:;"><i class="tree-icon"></i>集群[批量启动进程模块1]</a>
                        <ul class="tree-secondary">
                            <li class="file">
                                <a href="javascript:;"><i class="tree-icon"></i>testwa.fda.1.1</a>
                            </li>
                            <li class="file">
                                <a href="javascript:;"><i class="tree-icon"></i>testwa.fda.1.2</a>
                            </li>
                            <li class="file">
                                <a href="javascript:;"><i class="tree-icon"></i>testwa.fda.1.3</a>
                            </li>
                        </ul>
                    </li>
                    <li class="folder">
                        <a href="javascript:;"><i class="tree-icon"></i>集群[批量启动进程模块2]</a>
                    </li>
                    <li class="folder">
                        <a href="javascript:;"><i class="tree-icon"></i>集群[批量启动进程模块3]</a>
                    </li>
                    <li class="folder open">
                        <a href="javascript:;"><i class="tree-icon"></i>集群[批量启动进程模块4]</a>
                        <ul class="tree-secondary">
                            <li class="folder open">
                                <a href="javascript:;"><i class="tree-icon"></i>testwa.fda.1.1</a>
                                <ul>
                                    <li class="file">
                                        <a href="javascript:;"><i class="tree-icon"></i>testwa.fda.1.3</a>
                                    </li>
                                    <li class="file">
                                        <a href="javascript:;"><i class="tree-icon"></i>testwa.fda.1.3</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="file">
                                <a href="javascript:;"><i class="tree-icon"></i>testwa.fda.1.3</a>
                            </li>
                        </ul>
                    </li>
                    <li class="folder">
                        <a href="javascript:;"><i class="tree-icon"></i>集群[批量启动进程模块3]</a>
                    </li>
                    -->
                </ul>
            </div>
        </div>

        <div class="page-content" style="min-width: 80%">
            <div class="bk-collapse-panel">
                <div class="panel-body panel-collapse collapse in p0">
                    <div class="bk-form bk-inline-form">
                        <div class="bk-form-item">
                            <label class="bk-label">主机IP</label>
                            <div class="bk-form-content">
                                <input type="text" class="bk-form-input" style="width: 500px; height: 100px">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-body panel-collapse collapse in p0">
                    <div class="bk-form bk-inline-form">
                        <div class="bk-form-item">
                            <label class="bk-label">目录</label>
                            <div class="bk-form-content">
                                <input type="text" class="bk-form-input" placeholder="请输入目录的绝对路径，如'/tmp'" style="width: 350px;margin-left: 12px">
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label">文件后缀</label>
                            <div class="bk-form-content">
                                <input type="text" class="bk-form-input" placeholder="请输入文件后缀" style="width: 150px">
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-tag is-full bk-success" style="text-align:center; line-height:30px; width: 100px; height: 30px; font-size: 15px">
                                <label class="bk-icon icon-search"></label> 立即搜索
                            </label>
                        </div>

                    </div>
                </div>
            </div>

            <div class="bk-collapse-panel">
                <div class="panel-header" role="tab">
                    <a href="#panel-content2" role="button" data-toggle="collapse" class="panel-icon panel-spread"></a>
                    <h3 role="button" data-toggle="collapse" href="#panel-content2" class="panel-title" aria-expanded="true">文件列表</h3>
                </div>
                <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
                    <table class="bk-table bk-table-header-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>IP</th>
                            <th>文件列表</th>
                            <th>文件数量</th>
                            <th>文件总大小</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for fs in files %}
                            <tr>
                                <td>{{ fs.id }}</td>
                                <td>{{ fs.ip }}</td>
                                <td>{{ fs.file_list }}</td>
                                <td>{{ fs.file_num }}</td>
                                <td>{{ fs.file_size }}</td>
                                <td><a class="bk-text-button bk-info" title="立即备份">立即备份</a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block extra_block %}
    <script type="text/javascript">
        $('.bk-tree').on('click', 'a', function (event) {
            if ($(this).parent('li').hasClass('file')) {
                $('.file').removeClass('open');
            }
            $(this).parent('li').toggleClass('open');
        });
    </script>
    <script>
        function search_biz_infos() {
            /*
            var options = document.getElementById("search_biz_infos");
            // 方式一 获取选中的的option值
            id1 = options.options[options.selectedIndex].value;
            // 方式二
            id2 = options.value;
            console.log(id1, id2);
            // 方式三
            console.log("选中的业务ID", $("#search_biz_infos option:selected").val())
            */

            $.ajax({
                url: "{{ SITE_URL }}resource_home/search_biz_inst_topo/",
                method: 'post',
                data: JSON.stringify({
                    "bk_biz_id": parseInt($("#search_biz_infos option:selected").val()),
                }),
                success: function (json) {
                    var bk_ul_tops = '<li class="folder open"><a href="javascript:;"><i class="tree-icon"></i>' + json.bk_inst_name + '</a>';
                    var sub_str1 = "";
                    if (json.child.length > 0) {
                        sub_str1 += '<ul class="tree-secondary">';
                        var sub_str2 = "";
                        json.child.forEach(function (childs) {
                            //childs.bk_inst_name   childs.bk_inst_id   childs.bk_obj_id   childs.bk_obj_name
                            sub_str2 += '<li class="folder"><a href="javascript:;"><i class="tree-icon"></i>' + childs.bk_inst_name + '</a>';

                            if (childs.child.length > 0) {
                                sub_str2 += '<ul>';
                                var sub_str3 = "";
                                childs.child.forEach(function (subChild) {
                                    sub_str3 += '<li class="file"><a href="javascript:;"><i class="tree-icon"></i>' + subChild.bk_inst_name + '</a></li>'
                                });
                                sub_str2 += sub_str3 + '</ul>';
                            }

                            sub_str2 += '</li>';
                        });
                        sub_str1 += sub_str2 + "</ul>";
                    }
                    document.getElementById("bk-ul-tops").innerHTML = bk_ul_tops + sub_str1 + '</li>';
                }
            });
        }

        // 默认页面加载执行一次
        search_biz_infos();

    </script>
{% endblock %}